<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useTheme } from '@/composables/useTheme'
import { useAuth } from '@/composables/useAuth'
import ThemeSwitcher from '@/components/ThemeSwitcher.vue'
import {
  PhGear,
  PhPalette,
  PhBell,
  PhShield,
  PhCheck,
  PhX,
  PhTrash,
  PhDownload,
  PhWarning,
  PhInfo,
  PhUser,
} from '@phosphor-icons/vue'

defineOptions({
  name: 'SettingsPage',
})

/**
 * 主题和认证
 */
const { currentTheme } = useTheme()
const { logout } = useAuth()

/**
 * 设置分类
 */
const activeTab = ref('appearance')

const settingsTabs = [
  { id: 'appearance', name: '外观设置', icon: PhPalette },
  { id: 'notifications', name: '通知设置', icon: PhBell },
  { id: 'privacy', name: '隐私设置', icon: PhShield },
  { id: 'account', name: '账户设置', icon: PhUser },
  { id: 'data', name: '数据管理', icon: PhDownload },
]

/**
 * 外观设置
 */
const appearanceSettings = ref({
  theme: 'auto',
  fontSize: 'medium',
  compactMode: false,
  animations: true,
  highContrast: false,
})

/**
 * 通知设置
 */
const notificationSettings = ref({
  emailNotifications: true,
  pushNotifications: true,
  commentNotifications: true,
  likeNotifications: false,
  followNotifications: true,
  systemNotifications: true,
  marketingEmails: false,
  weeklyDigest: true,
})

/**
 * 隐私设置
 */
const privacySettings = ref({
  profileVisibility: 'public',
  showEmail: false,
  showPhone: false,
  allowIndexing: true,
  dataCollection: true,
  analyticsTracking: false,
  thirdPartySharing: false,
})

/**
 * 账户设置
 */
const accountSettings = ref({
  twoFactorAuth: false,
  loginAlerts: true,
  sessionTimeout: '30',
  passwordExpiry: '90',
})

/**
 * 数据管理
 */
const dataSettings = ref({
  autoBackup: true,
  backupFrequency: 'weekly',
  dataRetention: '365',
})

/**
 * 保存设置
 */
const saveSettings = async (category: string): Promise<void> => {
  try {
    // TODO: 调用API保存设置
    console.log(`保存${category}设置`)

    // 显示成功提示
    showNotification('设置已保存', 'success')
  } catch (error) {
    console.error('保存设置失败:', error)
    showNotification('保存失败，请重试', 'error')
  }
}

/**
 * 重置设置
 */
const resetSettings = async (category: string): Promise<void> => {
  if (!confirm('确定要重置这些设置吗？此操作无法撤销。')) {
    return
  }

  try {
    // TODO: 重置设置到默认值
    console.log(`重置${category}设置`)

    showNotification('设置已重置', 'success')
  } catch (error) {
    console.error('重置设置失败:', error)
    showNotification('重置失败，请重试', 'error')
  }
}

/**
 * 导出数据
 */
const exportData = async (): Promise<void> => {
  try {
    // TODO: 实现数据导出
    console.log('导出用户数据')

    showNotification('数据导出已开始，完成后将发送到您的邮箱', 'info')
  } catch (error) {
    console.error('导出数据失败:', error)
    showNotification('导出失败，请重试', 'error')
  }
}

/**
 * 删除账户
 */
const deleteAccount = async (): Promise<void> => {
  const confirmation = prompt('请输入 "DELETE" 确认删除账户（此操作无法撤销）:')

  if (confirmation !== 'DELETE') {
    return
  }

  try {
    // TODO: 实现账户删除
    console.log('删除用户账户')

    await logout()
  } catch (error) {
    console.error('删除账户失败:', error)
    showNotification('删除失败，请重试', 'error')
  }
}

/**
 * 通知系统
 */
const notifications = ref<Array<{ id: string; message: string; type: string; visible: boolean }>>(
  [],
)

const showNotification = (
  message: string,
  type: 'success' | 'error' | 'info' | 'warning' = 'info',
): void => {
  const id = Date.now().toString()
  const notification = { id, message, type, visible: true }

  notifications.value.push(notification)

  setTimeout(() => {
    const index = notifications.value.findIndex((n) => n.id === id)
    if (index > -1) {
      notifications.value[index].visible = false
      setTimeout(() => {
        notifications.value.splice(index, 1)
      }, 300)
    }
  }, 3000)
}

/**
 * 字体大小选项
 */
const fontSizeOptions = [
  { value: 'small', label: '小' },
  { value: 'medium', label: '中' },
  { value: 'large', label: '大' },
]

/**
 * 隐私选项
 */
const visibilityOptions = [
  { value: 'public', label: '公开' },
  { value: 'friends', label: '仅好友' },
  { value: 'private', label: '私密' },
]

/**
 * 备份频率选项
 */
const backupFrequencyOptions = [
  { value: 'daily', label: '每日' },
  { value: 'weekly', label: '每周' },
  { value: 'monthly', label: '每月' },
]

onMounted(() => {
  console.log('设置页面已加载')
})
</script>

<template>
  <div class="settings-page min-h-screen bg-base-200/30 pt-16 sm:pt-20">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-6xl py-8 sm:py-12">
      <!-- 页面标题 -->
      <div class="settings-header mb-8 sm:mb-12">
        <h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-base-content mb-2">
          <PhGear :size="32" class="inline mr-3" />
          设置中心
        </h1>
        <p class="text-base-content/70 text-sm sm:text-base">
          管理您的账户设置、隐私偏好和应用配置
        </p>
      </div>

      <div class="settings-container grid grid-cols-1 lg:grid-cols-4 gap-6 sm:gap-8">
        <!-- 侧边栏导航 -->
        <div class="lg:col-span-1">
          <div class="settings-nav bg-base-100 rounded-2xl shadow-xl p-4 sm:p-6 sticky top-24">
            <nav class="space-y-2">
              <button
                v-for="tab in settingsTabs"
                :key="tab.id"
                @click="activeTab = tab.id"
                :class="[
                  'nav-item w-full flex items-center gap-3 px-4 py-3 rounded-xl text-left transition-all duration-200',
                  activeTab === tab.id
                    ? 'bg-primary text-primary-content shadow-lg'
                    : 'hover:bg-base-200 text-base-content',
                ]"
              >
                <component :is="tab.icon" :size="20" />
                <span class="font-medium text-sm sm:text-base">{{ tab.name }}</span>
              </button>
            </nav>
          </div>
        </div>

        <!-- 设置内容 -->
        <div class="lg:col-span-3">
          <!-- 外观设置 -->
          <div v-if="activeTab === 'appearance'" class="settings-content">
            <div class="card bg-base-100 shadow-xl">
              <div class="card-body p-6 sm:p-8">
                <h2 class="card-title text-xl sm:text-2xl mb-6">
                  <PhPalette :size="24" />
                  外观设置
                </h2>

                <div class="space-y-6 sm:space-y-8">
                  <!-- 主题选择 -->
                  <div class="setting-group">
                    <h3 class="text-lg font-semibold mb-4">主题选择</h3>
                    <div class="theme-selector">
                      <ThemeSwitcher>
                        <template #trigger="{ open }">
                          <button @click="open" class="btn btn-outline btn-lg w-full sm:w-auto">
                            <PhPalette :size="20" />
                            切换主题
                          </button>
                        </template>
                      </ThemeSwitcher>
                      <p class="text-sm text-base-content/60 mt-2">
                        当前主题：{{ currentTheme.name }}
                      </p>
                    </div>
                  </div>

                  <!-- 字体大小 -->
                  <div class="setting-group">
                    <h3 class="text-lg font-semibold mb-4">字体大小</h3>
                    <div class="radio-group flex flex-wrap gap-4">
                      <label
                        v-for="option in fontSizeOptions"
                        :key="option.value"
                        class="radio-option cursor-pointer"
                      >
                        <input
                          v-model="appearanceSettings.fontSize"
                          type="radio"
                          :value="option.value"
                          class="radio radio-primary"
                        />
                        <span class="ml-2">{{ option.label }}</span>
                      </label>
                    </div>
                  </div>

                  <!-- 其他外观选项 -->
                  <div class="setting-group">
                    <h3 class="text-lg font-semibold mb-4">显示选项</h3>
                    <div class="space-y-4">
                      <label class="toggle-option flex items-center justify-between">
                        <span>紧凑模式</span>
                        <input
                          v-model="appearanceSettings.compactMode"
                          type="checkbox"
                          class="toggle toggle-primary"
                        />
                      </label>
                      <label class="toggle-option flex items-center justify-between">
                        <span>启用动画</span>
                        <input
                          v-model="appearanceSettings.animations"
                          type="checkbox"
                          class="toggle toggle-primary"
                        />
                      </label>
                      <label class="toggle-option flex items-center justify-between">
                        <span>高对比度</span>
                        <input
                          v-model="appearanceSettings.highContrast"
                          type="checkbox"
                          class="toggle toggle-primary"
                        />
                      </label>
                    </div>
                  </div>

                  <!-- 保存按钮 -->
                  <div class="setting-actions flex flex-col sm:flex-row gap-3">
                    <button @click="saveSettings('appearance')" class="btn btn-primary">
                      <PhCheck :size="16" />
                      保存设置
                    </button>
                    <button @click="resetSettings('appearance')" class="btn btn-ghost">
                      <PhX :size="16" />
                      重置默认
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 通知设置 -->
          <div v-if="activeTab === 'notifications'" class="settings-content">
            <div class="card bg-base-100 shadow-xl">
              <div class="card-body p-6 sm:p-8">
                <h2 class="card-title text-xl sm:text-2xl mb-6">
                  <PhBell :size="24" />
                  通知设置
                </h2>

                <div class="space-y-6 sm:space-y-8">
                  <!-- 推送通知 -->
                  <div class="setting-group">
                    <h3 class="text-lg font-semibold mb-4">推送通知</h3>
                    <div class="space-y-4">
                      <label class="toggle-option flex items-center justify-between">
                        <div>
                          <span>邮件通知</span>
                          <p class="text-sm text-base-content/60">接收重要更新的邮件通知</p>
                        </div>
                        <input
                          v-model="notificationSettings.emailNotifications"
                          type="checkbox"
                          class="toggle toggle-primary"
                        />
                      </label>
                      <label class="toggle-option flex items-center justify-between">
                        <div>
                          <span>浏览器推送</span>
                          <p class="text-sm text-base-content/60">在浏览器中显示推送通知</p>
                        </div>
                        <input
                          v-model="notificationSettings.pushNotifications"
                          type="checkbox"
                          class="toggle toggle-primary"
                        />
                      </label>
                    </div>
                  </div>

                  <!-- 内容通知 -->
                  <div class="setting-group">
                    <h3 class="text-lg font-semibold mb-4">内容通知</h3>
                    <div class="space-y-4">
                      <label class="toggle-option flex items-center justify-between">
                        <span>新评论通知</span>
                        <input
                          v-model="notificationSettings.commentNotifications"
                          type="checkbox"
                          class="toggle toggle-primary"
                        />
                      </label>
                      <label class="toggle-option flex items-center justify-between">
                        <span>点赞通知</span>
                        <input
                          v-model="notificationSettings.likeNotifications"
                          type="checkbox"
                          class="toggle toggle-primary"
                        />
                      </label>
                      <label class="toggle-option flex items-center justify-between">
                        <span>关注通知</span>
                        <input
                          v-model="notificationSettings.followNotifications"
                          type="checkbox"
                          class="toggle toggle-primary"
                        />
                      </label>
                    </div>
                  </div>

                  <!-- 系统通知 -->
                  <div class="setting-group">
                    <h3 class="text-lg font-semibold mb-4">系统通知</h3>
                    <div class="space-y-4">
                      <label class="toggle-option flex items-center justify-between">
                        <span>系统更新通知</span>
                        <input
                          v-model="notificationSettings.systemNotifications"
                          type="checkbox"
                          class="toggle toggle-primary"
                        />
                      </label>
                      <label class="toggle-option flex items-center justify-between">
                        <span>营销邮件</span>
                        <input
                          v-model="notificationSettings.marketingEmails"
                          type="checkbox"
                          class="toggle toggle-primary"
                        />
                      </label>
                      <label class="toggle-option flex items-center justify-between">
                        <span>每周摘要</span>
                        <input
                          v-model="notificationSettings.weeklyDigest"
                          type="checkbox"
                          class="toggle toggle-primary"
                        />
                      </label>
                    </div>
                  </div>

                  <!-- 保存按钮 -->
                  <div class="setting-actions flex flex-col sm:flex-row gap-3">
                    <button @click="saveSettings('notifications')" class="btn btn-primary">
                      <PhCheck :size="16" />
                      保存设置
                    </button>
                    <button @click="resetSettings('notifications')" class="btn btn-ghost">
                      <PhX :size="16" />
                      重置默认
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 隐私设置 -->
          <div v-if="activeTab === 'privacy'" class="settings-content">
            <div class="card bg-base-100 shadow-xl">
              <div class="card-body p-6 sm:p-8">
                <h2 class="card-title text-xl sm:text-2xl mb-6">
                  <PhShield :size="24" />
                  隐私设置
                </h2>

                <div class="space-y-6 sm:space-y-8">
                  <!-- 资料可见性 -->
                  <div class="setting-group">
                    <h3 class="text-lg font-semibold mb-4">资料可见性</h3>
                    <div class="radio-group space-y-3">
                      <label
                        v-for="option in visibilityOptions"
                        :key="option.value"
                        class="radio-option cursor-pointer flex items-center"
                      >
                        <input
                          v-model="privacySettings.profileVisibility"
                          type="radio"
                          :value="option.value"
                          class="radio radio-primary"
                        />
                        <span class="ml-3">{{ option.label }}</span>
                      </label>
                    </div>
                  </div>

                  <!-- 信息显示 -->
                  <div class="setting-group">
                    <h3 class="text-lg font-semibold mb-4">信息显示</h3>
                    <div class="space-y-4">
                      <label class="toggle-option flex items-center justify-between">
                        <span>显示邮箱地址</span>
                        <input
                          v-model="privacySettings.showEmail"
                          type="checkbox"
                          class="toggle toggle-primary"
                        />
                      </label>
                      <label class="toggle-option flex items-center justify-between">
                        <span>显示手机号码</span>
                        <input
                          v-model="privacySettings.showPhone"
                          type="checkbox"
                          class="toggle toggle-primary"
                        />
                      </label>
                    </div>
                  </div>

                  <!-- 数据使用 -->
                  <div class="setting-group">
                    <h3 class="text-lg font-semibold mb-4">数据使用</h3>
                    <div class="space-y-4">
                      <label class="toggle-option flex items-center justify-between">
                        <div>
                          <span>允许搜索引擎索引</span>
                          <p class="text-sm text-base-content/60">让搜索引擎能够找到您的公开内容</p>
                        </div>
                        <input
                          v-model="privacySettings.allowIndexing"
                          type="checkbox"
                          class="toggle toggle-primary"
                        />
                      </label>
                      <label class="toggle-option flex items-center justify-between">
                        <div>
                          <span>数据收集</span>
                          <p class="text-sm text-base-content/60">允许收集匿名使用数据以改进服务</p>
                        </div>
                        <input
                          v-model="privacySettings.dataCollection"
                          type="checkbox"
                          class="toggle toggle-primary"
                        />
                      </label>
                      <label class="toggle-option flex items-center justify-between">
                        <div>
                          <span>分析跟踪</span>
                          <p class="text-sm text-base-content/60">允许使用分析工具跟踪使用情况</p>
                        </div>
                        <input
                          v-model="privacySettings.analyticsTracking"
                          type="checkbox"
                          class="toggle toggle-primary"
                        />
                      </label>
                    </div>
                  </div>

                  <!-- 保存按钮 -->
                  <div class="setting-actions flex flex-col sm:flex-row gap-3">
                    <button @click="saveSettings('privacy')" class="btn btn-primary">
                      <PhCheck :size="16" />
                      保存设置
                    </button>
                    <button @click="resetSettings('privacy')" class="btn btn-ghost">
                      <PhX :size="16" />
                      重置默认
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 账户设置 -->
          <div v-if="activeTab === 'account'" class="settings-content">
            <div class="card bg-base-100 shadow-xl">
              <div class="card-body p-6 sm:p-8">
                <h2 class="card-title text-xl sm:text-2xl mb-6">
                  <PhUser :size="24" />
                  账户设置
                </h2>

                <div class="space-y-6 sm:space-y-8">
                  <!-- 安全设置 -->
                  <div class="setting-group">
                    <h3 class="text-lg font-semibold mb-4">安全设置</h3>
                    <div class="space-y-4">
                      <label class="toggle-option flex items-center justify-between">
                        <div>
                          <span>双因素认证</span>
                          <p class="text-sm text-base-content/60">为您的账户添加额外的安全保护</p>
                        </div>
                        <input
                          v-model="accountSettings.twoFactorAuth"
                          type="checkbox"
                          class="toggle toggle-primary"
                        />
                      </label>
                      <label class="toggle-option flex items-center justify-between">
                        <div>
                          <span>登录提醒</span>
                          <p class="text-sm text-base-content/60">新设备登录时发送邮件提醒</p>
                        </div>
                        <input
                          v-model="accountSettings.loginAlerts"
                          type="checkbox"
                          class="toggle toggle-primary"
                        />
                      </label>
                    </div>
                  </div>

                  <!-- 会话管理 -->
                  <div class="setting-group">
                    <h3 class="text-lg font-semibold mb-4">会话管理</h3>
                    <div class="space-y-4">
                      <div class="form-control">
                        <label class="label">
                          <span class="label-text">会话超时时间（分钟）</span>
                        </label>
                        <select
                          v-model="accountSettings.sessionTimeout"
                          class="select select-bordered"
                        >
                          <option value="15">15 分钟</option>
                          <option value="30">30 分钟</option>
                          <option value="60">1 小时</option>
                          <option value="120">2 小时</option>
                        </select>
                      </div>
                      <div class="form-control">
                        <label class="label">
                          <span class="label-text">密码过期时间（天）</span>
                        </label>
                        <select
                          v-model="accountSettings.passwordExpiry"
                          class="select select-bordered"
                        >
                          <option value="30">30 天</option>
                          <option value="60">60 天</option>
                          <option value="90">90 天</option>
                          <option value="180">180 天</option>
                        </select>
                      </div>
                    </div>
                  </div>

                  <!-- 危险操作 -->
                  <div class="setting-group">
                    <h3 class="text-lg font-semibold mb-4 text-error">危险操作</h3>
                    <div class="alert alert-warning mb-4">
                      <PhWarning :size="20" />
                      <span>以下操作可能会永久影响您的账户，请谨慎操作。</span>
                    </div>
                    <div class="space-y-4">
                      <button @click="deleteAccount" class="btn btn-error btn-outline">
                        <PhTrash :size="16" />
                        删除账户
                      </button>
                    </div>
                  </div>

                  <!-- 保存按钮 -->
                  <div class="setting-actions flex flex-col sm:flex-row gap-3">
                    <button @click="saveSettings('account')" class="btn btn-primary">
                      <PhCheck :size="16" />
                      保存设置
                    </button>
                    <button @click="resetSettings('account')" class="btn btn-ghost">
                      <PhX :size="16" />
                      重置默认
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 数据管理 -->
          <div v-if="activeTab === 'data'" class="settings-content">
            <div class="card bg-base-100 shadow-xl">
              <div class="card-body p-6 sm:p-8">
                <h2 class="card-title text-xl sm:text-2xl mb-6">
                  <PhDownload :size="24" />
                  数据管理
                </h2>

                <div class="space-y-6 sm:space-y-8">
                  <!-- 备份设置 -->
                  <div class="setting-group">
                    <h3 class="text-lg font-semibold mb-4">自动备份</h3>
                    <div class="space-y-4">
                      <label class="toggle-option flex items-center justify-between">
                        <div>
                          <span>启用自动备份</span>
                          <p class="text-sm text-base-content/60">定期备份您的数据到云端</p>
                        </div>
                        <input
                          v-model="dataSettings.autoBackup"
                          type="checkbox"
                          class="toggle toggle-primary"
                        />
                      </label>
                      <div v-if="dataSettings.autoBackup" class="form-control">
                        <label class="label">
                          <span class="label-text">备份频率</span>
                        </label>
                        <select
                          v-model="dataSettings.backupFrequency"
                          class="select select-bordered"
                        >
                          <option
                            v-for="option in backupFrequencyOptions"
                            :key="option.value"
                            :value="option.value"
                          >
                            {{ option.label }}
                          </option>
                        </select>
                      </div>
                    </div>
                  </div>

                  <!-- 数据导出 -->
                  <div class="setting-group">
                    <h3 class="text-lg font-semibold mb-4">数据导出</h3>
                    <div class="alert alert-info mb-4">
                      <PhInfo :size="20" />
                      <span>您可以导出所有个人数据，包括文章、评论和设置。</span>
                    </div>
                    <button @click="exportData" class="btn btn-primary btn-outline">
                      <PhDownload :size="16" />
                      导出我的数据
                    </button>
                  </div>

                  <!-- 数据保留 -->
                  <div class="setting-group">
                    <h3 class="text-lg font-semibold mb-4">数据保留</h3>
                    <div class="form-control">
                      <label class="label">
                        <span class="label-text">数据保留期限（天）</span>
                      </label>
                      <select v-model="dataSettings.dataRetention" class="select select-bordered">
                        <option value="90">90 天</option>
                        <option value="180">180 天</option>
                        <option value="365">1 年</option>
                        <option value="730">2 年</option>
                        <option value="-1">永久保留</option>
                      </select>
                      <label class="label">
                        <span class="label-text-alt">删除的数据将在此期限后永久清除</span>
                      </label>
                    </div>
                  </div>

                  <!-- 保存按钮 -->
                  <div class="setting-actions flex flex-col sm:flex-row gap-3">
                    <button @click="saveSettings('data')" class="btn btn-primary">
                      <PhCheck :size="16" />
                      保存设置
                    </button>
                    <button @click="resetSettings('data')" class="btn btn-ghost">
                      <PhX :size="16" />
                      重置默认
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 通知提示 -->
    <div class="toast toast-top toast-end z-[100]">
      <div
        v-for="notification in notifications"
        :key="notification.id"
        :class="[
          'alert transition-all duration-300',
          {
            'alert-success': notification.type === 'success',
            'alert-error': notification.type === 'error',
            'alert-info': notification.type === 'info',
            'alert-warning': notification.type === 'warning',
            'opacity-0 translate-x-full': !notification.visible,
            'opacity-100 translate-x-0': notification.visible,
          },
        ]"
      >
        <span>{{ notification.message }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
/* 设置页面样式 */
.settings-page {
  min-height: 100vh;
}

.settings-header {
  animation: fadeInUp 0.6s ease-out;
}

.settings-nav {
  animation: fadeInLeft 0.6s ease-out 0.1s both;

  .nav-item {
    font-weight: 500;

    &:hover {
      transform: translateX(4px);
    }

    &.bg-primary {
      transform: translateX(8px);
    }
  }
}

.settings-content {
  animation: fadeInUp 0.6s ease-out 0.2s both;
}

.setting-group {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid hsl(var(--b3));

  &:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  h3 {
    color: hsl(var(--bc));
    margin-bottom: 1rem;
  }
}

.toggle-option {
  padding: 0.75rem 0;
  border-bottom: 1px solid hsl(var(--b3) / 0.3);

  &:last-child {
    border-bottom: none;
  }

  .toggle {
    flex-shrink: 0;
  }
}

.radio-option {
  display: flex;
  align-items: center;
  padding: 0.5rem 0;

  .radio {
    flex-shrink: 0;
  }
}

.setting-actions {
  padding-top: 1.5rem;
  border-top: 1px solid hsl(var(--b3));
  margin-top: 1.5rem;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .settings-container {
    grid-template-columns: 1fr;
  }

  .settings-nav {
    position: static;
    margin-bottom: 2rem;

    nav {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 0.5rem;
    }

    .nav-item {
      justify-content: center;
      text-align: center;
    }
  }
}

@media (max-width: 640px) {
  .settings-header {
    margin-bottom: 2rem;

    h1 {
      font-size: 1.5rem;
    }
  }

  .card-body {
    padding: 1.5rem;
  }

  .card-title {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
  }

  .setting-group {
    padding-bottom: 1rem;

    h3 {
      font-size: 1rem;
      margin-bottom: 0.75rem;
    }
  }

  .toggle-option {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;

    .toggle {
      align-self: flex-end;
    }
  }

  .setting-actions {
    flex-direction: column;

    .btn {
      width: 100%;
    }
  }

  .settings-nav {
    nav {
      grid-template-columns: 1fr;
    }

    .nav-item {
      font-size: 0.875rem;
      padding: 0.75rem;
    }
  }
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 通知样式 */
.toast {
  .alert {
    min-width: 300px;
    margin-bottom: 0.5rem;
  }
}

/* 无障碍访问 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
</style>
